<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    .card-outer {
      width: 400px;
      height: 800px;
      border: 1px solid red;
      background-color: beige;
    }
    #move-bar {
      width: 400px;
      height: 50px;
      background-color: antiquewhite;
      cursor: move;
    }
  </style>
  <body>
    <div
      class="card-content"
      style="position: absolute; top: 50px; left: 100px"
    >
      <div id="move-bar"></div>
      <div class="card-outer">
        <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
          <li>5</li>
        </ul>
      </div>
    </div>
    <script>
      var moveBar = document.getElementById("move-bar");
      var cardContent = document.querySelector(".card-content");
      moveBar.onmousedown = (e) => {
        var x = e.clientX,
          y = e.clientY;
        var rect = moveBar.getBoundingClientRect();
        var ex = rect.left,
          ey = rect.top;

        // 视口的宽度
        var vw = document.documentElement.clientWidth,
          vh = document.documentElement.clientHeight,
          ew = cardContent.offsetWidth,
          eh = cardContent.offsetHeight,
          maxLeft = vw - ew,
          maxTop = vh - eh;
        window.onmousemove = (e) => {
          var disX = e.clientX - x,
            disY = e.clientY - y;
          var left = ex + disX,
            top = ey + disY;
          if (left < 0) {
            left = 0;
          }
          if (left > maxLeft) {
            left = maxLeft;
          }
          if (top < 0) {
            top = 0;
          }
          if (top > maxTop) {
            top = maxTop;
          }
          cardContent.style.left = left + "px";
          cardContent.style.top = top + "px";
          console.log("鼠标移动", left);
        };
        window.onmouseup = () => {
          console.log("不再监听移动");
          window.onmousemove = null;
          window.onmousedown = null;
        };
      };
    </script>
  </body>
</html>
